import React from 'react'
import PropTypes from 'prop-types'
import {Col, Form, Input, InputNumber, Modal, Radio, Row, Select} from 'antd'
import moment from 'moment'

const {Option} = Select
const FormItem = Form.Item

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
}

const modal = ({
                 item = {},
                 onOk,
                 disable,
                 productCategory,
                 productBrand,
                 depot,
                 form: {
                   getFieldDecorator,
                   validateFields,
                   getFieldsValue,
                 },
                 ...modalProps
               }) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      if (data.birthDay) {
        data.birthDay = moment(data.birthDay).format('YYYY-MM-DD')
      }
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  const handleSelect = (fieldName, props) => {
    getFieldDecorator(fieldName, {initialValue: props.children})
  }


  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row gutter={{md: 12, lg: 24, xl: 48}}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="商品编号">
              {getFieldDecorator('sn', {
                initialValue: item.sn,
                rules: [{required: true, message: '请输入商品编号'}],
              })(<Input disabled={disable} placeholder="请输入商品编号"/>)}
              {getFieldDecorator('id', {initialValue: item.id})(<input type='hidden'/>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="商品名称">
              {getFieldDecorator('goodsName', {
                initialValue: item.goodsName,
                rules: [{required: true, message: '请输入商品名称'}],
              })(<Input disabled={disable} placeholder="请输入商品名称"/>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="商品库存">
              {getFieldDecorator('stockNum', {
                initialValue: item.stockNum,
                rules: [{required: true, message: '请输入商品库存数量'}],
              })(
                <InputNumber disabled={disable} style={{width: '100%'}} placeholder="请输入商品库存"/>,
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{md: 12, lg: 24, xl: 48}}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="商品价格">
              {getFieldDecorator('salePrice', {
                initialValue: item.salePrice,
                rules: [{required: true, message: '请输入商品价格'}],
              })(<Input disabled={disable} placeholder="请输入商品价格"/>)}
            </FormItem>
          </Col>

          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="商品分类">
              {getFieldDecorator('categoryId', {initialValue: item.categoryId})(
                <Select alowClear onSelect={(value, {props}) => handleSelect('categoryName', props)} placeholder={"请选择"}>
                  {productCategory.map(item => (<Option value={item.id}>{item.name}</Option>))}
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="商品品牌">
              {getFieldDecorator('brandId', {initialValue: item.brandId})(
                <Select alowClear onSelect={(value, {props}) => handleSelect('brandName', props)} placeholder={"请选择"}>
                  {productBrand.map(item => (<Option value={item.id}>{item.name}</Option>))}
                </Select>,
              )}
            </FormItem>
          </Col>

          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="商品折扣">
              {getFieldDecorator('discount', {initialValue: item.discount})(
                <InputNumber disabled={disable} style={{width: '100%'}} placeholder="请输入商品折扣"/>,
              )}
            </FormItem>
          </Col>

          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="上下架">
              {getFieldDecorator('status', {initialValue: item.status})(<Radio.Group>
                <Radio disabled={disable} value={0}>上架</Radio>
                <Radio disabled={disable} value={1}>下架</Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="单位">
              {getFieldDecorator('goodsUnit', {
                initialValue: item.goodsUnit,
              })(<Input disabled={disable} placeholder="单位"/>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="所属仓库">
              {getFieldDecorator('depotId', {
                initialValue: item.depotId,
              })(<Select alowClear onSelect={(value, {props}) => handleSelect('depotName', props)} placeholder={"请选择"}>
                {depot.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="商品规格">
              {getFieldDecorator('specification', {
                initialValue: item.specification,
              })(<Input disabled={disable} placeholder="商品规格"/>)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
